<template>
  <div class="card">
    <div class="top">
      <div class="top_left">
        <div class="title">{{ state.name }}</div>
        <div class="code">编号：{{ state.business_code }}</div>
        <el-icon class="copy" @click="onCopy"><DocumentCopy /></el-icon>
        <div v-if="state.stage_state == 1" class="status pending">{{ state.business_state }}</div>
        <div v-if="state.stage_state == 2" class="status yes">{{ state.business_state }}</div>
        <div v-if="state.stage_state == 3" class="status no">
          {{ state.business_state }}
          <el-tooltip effect="light" :content="state.audit_message" placement="top-start">
            <img
              src=""
              alt=""
            />
          </el-tooltip>
        </div>
      </div>
      <div class="top_right">
        <el-button v-if="state.audit_prem == 1 && state.stage_state != 2" plain @click="onAudit">审核</el-button>
        <template v-if="state.operate_prem == 1">
          <el-button plain @click="onEdit" :disabled="state.state != 1">编辑商机</el-button>
          <el-button plain @click="onCreateOrder" :disabled="state.state != 1">创建订单</el-button>
          <el-button plain @click="onLose">输单</el-button>
          <el-button type="primary" @click="onAddFollow">添加跟进</el-button>
        </template>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom_left">
        <img class="avatar" :src="state.cust_info.avatar" alt="" />
        <div class="user">
          <div class="name_box">
            <el-tooltip v-if="state.cust_info.name?.length > 11" effect="dark" :content="state.cust_info.name" placement="top-start">
              <div class="name">{{ state.cust_info.name }}</div>
            </el-tooltip>
            <div v-else class="name">{{ state.cust_info.name }}</div>
            <el-icon v-if="state.cust_info?.sex == 1" class="men"><Male /></el-icon>
            <el-icon v-else-if="state.cust_info?.sex == 2" class="women"><Female /></el-icon>
            <img v-else src="/src/assets/image/customer/sex_0.png" alt="" />
          </div>
          <div class="mobile">
            <span>{{ state.cust_info.mobile }} </span>
            <img v-if="state.cust_info.external_type === 1" class="weixin" src="@/assets/icon/weixin-icon.png" alt="" />
            <img v-if="state.cust_info.external_type === 2" class="weixin" src="@/assets/icon/qiyeweixin-icon.png" alt="" />
          </div>
        </div>
      </div>
      <div class="bottom_right">
        <div class="item" v-for="(item, index) in state.list" :key="item">
          <div class="item_name">{{ item.name }}</div>
          <div :class="index == 0 ? 'item_desc item_color' : 'item_desc'">{{ item.value }}</div>
        </div>
      </div>
    </div>
  </div>
  <AuditDialog ref="AuditDialogRef" type="detail" @submit="handleSubmit" />
  <ListLoseDialog ref="ListLoseDialogRef" @submit="handleSubmit" />
  <AddFollowDrawer ref="AddFollowDrawerRef" @submit="handleSubmit" />
</template>

<script setup lang="ts">
  import AuditDialog from '../../components/AuditDialog.vue'
  import ListLoseDialog from '../../components/ListLoseDialog.vue'
  import AddFollowDrawer from '../../components/AddFollowDrawer.vue'
  import useClipboard from 'vue-clipboard3'
  import { ref, defineExpose } from 'vue'
  import { useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  const emit = defineEmits(['submit'])
  const router = useRouter()
  const state = ref<any>({
    cust_info: {
      name: '',
      mobile: '--',
      sex: 0,
      avatar: '',
      external_type: ''
    },
    list: []
  })
  const { toClipboard } = useClipboard()
  const onCopy = async () => {
    try {
      await toClipboard(state.value.business_code)
      ElMessage.success('复制成功')
    } catch (e) {
      ElMessage.error('复制失败')
    }
  }
  // 审核
  const AuditDialogRef = ref<any>(null)
  const ListLoseDialogRef = ref<any>(null)
  const onAudit = () => {
    AuditDialogRef.value.handleAuditDialog(state.value)
  }
  const onState = (v: any) => {
    console.log('onState')
    state.value = { ...v }
    if (v.cust_info.type == 2) {
      state.value.cust_info = {
        name: v.cust_info?.crop_info.short_name || v.cust_info?.crop_info.corp_name || v.cust_info?.crop_info.name || v.cust_info?.crop_info.nickname || '--',
        mobile: v.cust_info.mobile || '--',
        sex: v.cust_info.sex,
        avatar: v.cust_info.avatar,
        external_type: v.cust_info.external_type
      }
    }
    state.value.list = [
      { name: '预计赢单金额', value: `¥${v.amount}` },
      { name: '预计赢单日期', value: v.predict_time },
      { name: '订单总金额', value: v.order_amount || '暂无订单' },
      { name: '归属员工', value: v.belong_info?.name },
      { name: '最近跟进时间', value: v.follow_time || '--' },
      { name: '协作员工', value: `${v.assist_num}人` },
      { name: '群聊数量', value: `${v.groupchat_num}个` }
    ]
  }
  const onLose = () => {
    ListLoseDialogRef.value.onData(state.value)
  }
  const onEdit = () => {
    console.log('编辑商机')
    router.push(`/salesleads/salesmanagement/business/create?type=edit&id=${state.value.business_id}`)
  }
  const onCreateOrder = () => {
    router.push(`/salesleads/salesmanagement/ordermanagement/neworder?businessid=${state.value.business_id}`)
  }
  const AddFollowDrawerRef: any = ref(null)
  const onAddFollow = () => {
    AddFollowDrawerRef.value.handleShow(state.value)
  }
  const handleSubmit = () => {
    emit('submit')
  }
  defineExpose({
    onState
  })
</script>

<style lang="scss" scoped>
  .card {
    min-width: min-content;
    padding: 0 24px;
    margin-bottom: 16px;
    border: 1px solid #e4e7ed;
    background: #fff;
    font-family: PingFangSC-Medium, PingFang SC;
    .top {
      border-bottom: 1px solid #eaeaea;
      display: flex;
      justify-content: space-between;
      .top_left {
        height: 56px;
        display: flex;
        align-items: center;
        .title {
          min-width: min-content;
          margin-right: 16px;
          font-size: 16px;
          font-weight: 500;
          color: #33302d;
          line-height: 14px;
        }
        .code {
          height: 14px;
          margin-right: 6px;
          font-size: 14px;
          font-weight: 400;
          color: #969696;
          line-height: 14px;
        }
        .copy {
          margin-right: 26px;
          cursor: pointer;
          color: #ff6b00;
        }
        .status {
          height: 20px;
          display: flex;
          align-items: center;
          padding: 0px 8px;
          border-radius: 2px;
          font-size: 12px;
          font-weight: 400;
        }
        .yes {
          background: #ebfff3;
          color: #59d2a0;
          border: 1px solid #bcf1d1;
        }
        .pending {
          background: #ebf0ff;
          border: 1px solid #bac9f2;
          color: #5a84f7;
        }
        .no {
          background: #fff1f1;
          border-radius: 2px;
          border: 1px solid #ffa4a5;
          color: #fe292b;
        }
      }
      .top_right {
        display: flex;
        align-items: center;
      }
    }
    .bottom {
      padding: 24px 0;
      display: flex;
      align-items: center;
      .bottom_left {
        max-width: 320px;
        padding-right: 5px;
        border-right: 1px solid #eaeaea;
        display: flex;
        .avatar {
          width: 64px;
          height: 64px;
          margin-right: 10px;
          border-radius: 7px;
        }
        .user {
          padding-top: 10px;
          .name_box {
            margin-bottom: 8px;
            display: flex;
            .name {
              max-width: 230px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              word-break: break-all;
              font-size: 20px;
              font-weight: 500;
              color: #33302d;
              line-height: 21px;
            }
            .men {
              color: #74ddf4;
            }
            .women {
              color: #f474bf;
            }
            img {
              width: 16px;
              height: 16px;
            }
          }
          .mobile {
            height: 14px;
            margin-right: 12px;
            font-size: 14px;
            font-family: STHeitiSC-Light, STHeitiSC;
            font-weight: 300;
            color: #696969;
            line-height: 14px;
            .weixin {
              width: 14px;
              height: 14px;
            }
          }
        }
      }
      .bottom_right {
        min-width: min-content;
        height: 50px;
        padding: 5px 20px;
        flex: 1;
        display: flex;
        justify-content: space-between;
        .item {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .item_name {
            height: 14px;
            font-size: 14px;
            font-weight: 300;
            color: #696969;
            line-height: 14px;
          }
          .item_desc {
            font-size: 15px;
            font-weight: 500;
            color: #33302d;
          }
          .item_color {
            color: #ff6b00;
          }
        }
      }
    }
  }
</style>
